<template>
  <div class="page-article" v-if="article">
    <div class="title d-flex p-2 my-1">
      <button class="backBtn" @click="$router.go(-1)"></button>
      <h3 class="flex-1 pl-2 text-blue fs-12 ellipse">{{article.title}}</h3>
      <div class="text-grey fs-12">{{article.createdAt | date}}</div>
    </div>
    <div class="content px-3 py-4" v-html="article.body"></div>
    <div class="relation px-3">
      <h3 class="text-blue fs-12 py-3">相关资讯</h3>
      <div class="pb-5">
        <router-link :to="`/article/${item._id}`" tag="div" v-for="item in article.list" :key="item._id" class="d-flex pt-2">
          <div class="flex-1 ellipse pr-4">{{item.title}}</div>
          <div class="text-grey fs-12">{{item.createdAt | date}}</div>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs'

export default {
  filters: {
    date (val) {
      return dayjs(val).format('YYYY-MM-DD')
    }
  },
  props: {
    id: { requireed: true }
  },
  data () {
    return {
      article: {}
    }
  },
  methods: {
    async getArticle () {
      const { data: res } = await this.$http.get(`/articles/${this.id}`)
      this.article = res
    }
  },
  created () {
    this.getArticle()
  },
  watch: {
    id () {
      this.getArticle()
    }
  }
}
</script>

<style lang="less" scoped>
.backBtn {
  width: 10px;
  background: url('https://game.gtimg.cn/images/yxzj/m/m201606/cp/backBg.png') no-repeat center;
  background-size: 70%;
  border: 0;
}
.content {
  border-top: 1px solid #d4d4d5;
}
/deep/.content {
  p {
    margin: 0;
    img {
      max-width: 100%;
    }
  }
}
.relation {
  h3 {
    padding-left: 8%;
    background: url('https://game.gtimg.cn/images/yxzj/m/m201606/cp/lin.png') no-repeat left;
  }
}
</style>
